<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仿联想官网-商品详情页</title>
	<link rel="stylesheet" href="../css/xaingqingye.css">
	<link rel="stylesheet" href="../css/reset.css">
	<script type="text/javascript" src="../js/jQuery.min.js"></script>
</head>
<body>
	<!-- 头部信息 -->
	<div class="header_con">
		<div class="header">
			<div class="welcome">欢迎来到联想官网详情页面!</div>
			<div class="user_login">
				<a href="">登录</a>
				<span>|</span>
				<a href="">注册</a>
				<span>|</span>
				<a href="">我的购物车</a>
				<span>|</span>
				<a href="">我的订单</a>
			</div>
		</div>
	</div>
	<div class="search_bar clearfix">
		<a href="#" class="logo fl"><img src="../img/log.jpg"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" placeholder="搜索商品">
			<input type="button" class="input_btn fr" value="搜索">
		</div>
		<div class="guest_card fr">
			<a href="#" class="card_name fl">我的购物车</a>
			<div class="goods_count fl">1</div>
		</div>
	</div>
	<!-- 商品信息栏 -->
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类 <i></i></h1>
			</div>
			<ul class="navlist fl">
                <li><a href="../views/index.html">首页</a></li>
                <li><a href="">以旧换新</a></li>
                <li><a href="">抽奖</a></li>
            </ul>
		</div>
	</div>
	<div class="submena clearfix">
		<a href="../views/shangcheng.html">全部分类</a>
		<span>></span>
		<a href=" ">新品手机</a>
		<span>></span>
		<a href=" ">商品详情</a>
	</div>
	<div class="center_con clearfix">
    <!-- 整个放大镜区域 -->
    <div class="box" id="box">

        <!-- 正常显示图片区域 -->
        <div class="show">
            <img src="../img/Lenovo11.jpg" alt="">

            <!-- 遮罩层盒子 -->
            <div class="mask"></div>
        </div>

        <!-- 图片切换列表 -->
        <div class="list">
            <img class="active" src="../img/Lenovo11.small.jpg" data-show="../img/Lenovo11.jpg" data-bg="../img/Lenovo11.big.jpg" alt="">

            <img src="../img/lenovo22.small.jpg" data-show="../img/lenovo22.jpg" data-bg="../img/lenovo22.big.jpg" alt="">
        </div>

        <!-- 放大镜的盒子 -->
        <div class="enlarge">
            <img src="../img/Lenovo11.big.jpg" alt="">
        </div>
    </div>
    <script src="../js/enlarge.js"></script>
    <script>
        // 使用放大镜
        let e = new Enlarge('#box')
        console.log(e);
    </script>


		<div class="goods_detail_list fr">
			<h3>联想 小新 Pro16 2022标压锐龙版16英寸轻薄笔记本电脑 深空灰</h3>
			<p>AMD Ryzen R7 6800H/Windows11家庭中文版/16.0英寸/16G/512G SSD/Radeon 680M高性能集成显卡/深空灰</p>
			<div class="prize_bar">
				<div class="show_prize fl">￥<em>5199</em></div>
				<div class="show_unit fl">定金:￥2000</div>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>
				</div>
			</div>
			<div class="total">总价：<em>5199元</em></div>
			<div class="operate_btn">
				<a href="" class="buy_btn">立即购买</a>
				<a href="../views/gouwuche.html" class="add_cart">加入购物车</a>
			</div>
		</div>
	</div>
	
</body>
</html>